<template>
	<view class="content mainpadding" v-if="pageShow">
		<!-- 商家名稱 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">商家名稱<text style="color: #ff0000;">*</text></view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入商家名稱" placeholder-style="color: #999999;"
				v-model="name">
		</view>
		<!-- 商家分類 -->
		<!-- <view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">商家分類</view>
			<view class="flexleft" @click="show=true">
				<input class="text_a textright flex1 margin_right1" type="text" placeholder="請選擇分類"
					placeholder-style="color: #999999;" disabled v-model="sort">
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view> -->
		<!-- 發布票券 -->
		<!-- <view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">發布票券</view>
			<view class="flexleft">
				<u-radio-group v-model="type" placement="row" circle>
					<u-radio activeColor="#FFB800" :customStyle="{marginRight: '50rpx'}" labelColor="#999999" label="是"
						:name="0"></u-radio>
					<u-radio activeColor="#FFB800" labelColor="#999999" label="否" :name="1"></u-radio>
				</u-radio-group>
			</view>
		</view> -->
		<!-- 統一編號 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">統一編號</view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入統一編號" placeholder-style="color: #999999;"
				v-model="serialnum">
		</view>
		<uni-data-picker @change="bindPickerChanget" :localdata="items" placeholder="請選擇住址" popup-title="請選擇地區"
			v-model="area">
			<view class="flexbetween mainpadding ffffff border margin_bottom3">
				<view class="color_ling text_a white_nowrap margin_right3">營登區域</view>
				<view class="flexleft">
					<input class="text_a textright flex1 margin_right1" type="text" placeholder="請選擇所在地址"
						placeholder-style="color: #999999;" disabled v-if="!area1.length" v-model="addre_yd">
					<!-- <text class="inputs1" v-if="!area.length" style="color: #999999;">選擇省、市、县</text> -->
					<text v-else>{{ area1[0] }}/{{ area1[1] }}/{{ area1[2] }}</text>
					<view class="right_icon margin_left1"></view>
				</view>
			</view>
		</uni-data-picker>
		<!-- 營業地址 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">營登地址</view>
			<view class="flexleft">
				<input class="text_a textright flex1 margin_right1" type="text" placeholder="請輸入營登地址"
					placeholder-style="color: #999999;" v-model="address_yd">
				<!-- <u-icon name="arrow-right" color="#999" size="16"></u-icon> -->
			</view>
		</view>
		<!-- 商家電話 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">商家電話<text style="color: #ff0000;">*</text></view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入商家電話" placeholder-style="color: #999999;"
				v-model="shopmbl">
		</view>
		<!-- 所在地址 -->
		<uni-data-picker @change="bindPickerChange" :localdata="items" placeholder="請選擇住址" popup-title="請選擇地區"
			v-model="area">
			<view class="flexbetween mainpadding ffffff border margin_bottom3">
				<view class="color_ling text_a white_nowrap margin_right3">營業區域<text style="color: #ff0000;">*</text>
				</view>
				<view class="flexleft">

					<input class="text_a textright flex1 margin_right1" type="text" placeholder="請選擇所在地址"
						placeholder-style="color: #999999;" disabled v-if="!area.length" v-model="addre">
					<!-- <text class="inputs1" v-if="!area.length" style="color: #999999;">選擇省、市、县</text> -->
					<text v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
					<view class="right_icon margin_left1"></view>
				</view>
			</view>
		</uni-data-picker>
		<!-- 營業地址 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">營業地址<text style="color: #ff0000;">*</text></view>
			<view class="flexleft">
				<input class="text_a textright flex1 margin_right1" type="text" placeholder="請輸入營業地址"
					placeholder-style="color: #999999;" v-model="address">
				<!-- <u-icon name="arrow-right" color="#999" size="16"></u-icon> -->
			</view>
		</view>
		<!-- 上傳店鋪LOGO -->
		<view class="mainpadding ffffff border margin_bottom3">
			<view class="color_san text_a white_nowrap margin_right3">上傳店鋪LOGO<text style="color: #ff0000;">*</text>
			</view>
			<view class="flexleft flex_wrap">
				<view class="item_image_box margin_top" v-for="(item,index) in logoimage_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deletimg" @click="deleimage(index,logoimage,logoimage_arr)"></view>
					</view>
				</view>
				<!-- 圖片盒子 -->
				<view class="item_image_box margin_top" @click="uploadImg(logoimage,logoimage_arr,1)"
					v-if="logoimage_arr.length<1">
					<view class="item_image radius">
						<image src="/static/images/mine/noImage.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 上傳店鋪頂圖 -->
		<view class="mainpadding ffffff border margin_bottom3">
			<view class="color_san text_a white_nowrap margin_right3">上傳店鋪頂圖<text style="color: #ff0000;">*</text>
			</view>
			<view class="flexleft flex_wrap">
				<view class="item_image_box margin_top" v-for="(item,index) in topimages_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deletimg" @click="deleimage(index,topimages,topimages_arr)"></view>
					</view>
				</view>
				<!-- 圖片盒子 -->
				<view class="item_image_box margin_top" @click="uploadImg(topimages,topimages_arr,3)"
					v-if="topimages_arr.length<3">
					<view class="item_image radius">
						<image src="/static/images/mine/noImage.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 上傳室内圖 -->
		<view class="mainpadding ffffff border" style="margin-bottom: 150rpx;">
			<view class="color_san text_a white_nowrap margin_right3">上傳室内圖<text style="color: #ff0000;">*</text></view>
			<view class="flexleft flex_wrap">
				<view class="item_image_box margin_top" v-for="(item,index) in inimages_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deletimg" @click="deleimage(index,inimages,inimages_arr)"></view>
					</view>
				</view>
				<!-- 圖片盒子 -->
				<view class="item_image_box margin_top" @click="uploadImg(inimages,inimages_arr,4)"
					v-if="inimages_arr.length<4">
					<view class="item_image radius">
						<image src="/static/images/mine/noImage.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footerButton" @click="submit">
				提交審核
			</view>
		</view>
		<u-picker cancelText="取消" confirmText="確認" :show="show" :columns="columns" keyName="name" confirmColor="#FFB800"
			@cancel="show=false" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import citys from "../static/city/city.js"
	export default {
		data() {
			return {
				name: "", //商家名稱
				sort: "", //商家分類
				type: 0, //類型:0=是,1=否
				serialnum: "", //統一編號
				shopmbl: "", //商家電話
				items: citys.data, //省市區
				addre_yd: "",
				address_yd: "",
				area1: [], //選擇的省市區
				area: [], //選擇的省市區
				addre: "", //所在地址
				address: "", //營業地址
				logoimage: [], //店鋪LOGO
				logoimage_arr: [], //展示的店鋪LOGO
				topimages: [], //店鋪頂圖
				topimages_arr: [], //展示的店鋪頂圖
				inimages: [], //室内圖
				inimages_arr: [], //展示的室内圖
				images: [],
				pageShow: false,
				show: false,
				columns: []
			}
		},
		async onShow() {
			await this.getShopInfo()
			await this.getCateList()
		},
		methods: {
			getShopInfo() { //獲取提交商家認證信息
				let _this = this
				this.http.request('/api/shop/Shopdeail', 'POST', {}).then(res => {
					if (res.code != 0) {
						uni.redirectTo({
							url: "/pages_mine/examine"
						})
					}
					this.pageShow = true
				})
			},
			getCateList() { //獲取商家分類
				this.http.request('/api/index/getShopsort', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.columns.push(res.data)
					}
				})
			},
			confirm(e) { //確認分類
				console.log(e)
				this.sort = e.value[0].name
				this.show = false
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.addre = `${this.area[0]}/${this.area[1]}/${this.area[2]}`
			},
			bindPickerChanget(val) {
				let area = val.detail.value
				this.area1 = [area[0].text, area[1].text, area[2].text];
				this.addre_yd = `${this.area1[0]}/${this.area1[1]}/${this.area1[2]}`
			},
			deleimage(i, upimg, arr) { //刪除圖片
				upimg.splice(i, 1)
				arr.splice(i, 1)
			},
			async submit() {
				let _this = this
				if (!this.name) {
					this.http.toast("請輸入商家名稱！")
					return false
				}
				// if (!this.sort) {
				// 	this.http.toast("請選擇商家分類！")
				// 	return false
				// }
				// if (this.serialnum) {
				// 	if (!this.addre_yd) {
				// 		this.http.toast("請選擇營登區域！")
				// 		return false
				// 	}
				// 	if (!this.address_yd) {
				// 		this.http.toast("請輸入營登地址！")
				// 		return false
				// 	}
				// }
				if (!this.shopmbl) {
					this.http.toast("請輸入商家電話！")
					return false
				}
				if (!this.addre) {
					this.http.toast("請選擇營業區域！")
					return false
				}
				if (!this.address) {
					this.http.toast("請輸入營業地址！")
					return false
				}
				if (!this.logoimage.length) {
					this.http.toast("請上傳店鋪LOGO！")
					return false
				}
				if (!this.topimages.length) {
					this.http.toast("請上傳店鋪頂圖！")
					return false
				}
				if (!this.inimages.length) {
					this.http.toast("請上傳室内圖！")
					return false
				}
				let res = await this.http.request('/api/shop/addShop', 'POST', {
					name: _this.name, //商家名稱
					sort: _this.sort, //商家分類
					serialnum: _this.serialnum, //統一編號
					shopmbl: _this.shopmbl, //商家電話
					addre_yd: _this.addre_yd, //所在地址
					address_yd: _this.address_yd, //營業地址
					addre: _this.addre, //所在地址
					address: _this.address, //營業地址
					logoimage: _this.logoimage.join(), //店鋪LOGO
					topimages: _this.topimages.join(), //店鋪頂圖
					inimages: _this.inimages.join(), //室内圖
				})
				if (res.code == 1) {
					this.http.toast("提交成功")
					setTimeout(() => {
						uni.navigateBack(1)
					}, 500)
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>